<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>Pizza</title>
  <link rel="stylesheet" href="../pizza/css/ui.css?_t=undefined">
</head>
<body class="pz-contain">
<h2>提示框</h2>
<hr class="fn-mt10">
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-manageorder"></em>
  <span class="title">tip提示框</span>
</div>
<div id="j-tooltip" class="pz-boxbody fn-pd20 fn-textcenter">
  <span class="fn-mg10"><em class="pz-btn" data-type="left">左提示框</em></span>
  <span class="fn-mg10"><em class="pz-btn" data-type="top">上提示框</em></span>
  <span class="fn-mg10"><em class="pz-btn" data-type="bottom">下提示框</em></span>
  <span class="fn-mg10"><em class="pz-btn" data-type="right">右提示框</em></span>
</div>
<div class="pz-boxhead fn-mt20">
  <em class="icon pz-icon icon-manageorder"></em>
  <span class="title">popover提示框</span>
</div>
<div class="pz-boxbody fn-pd15">
  <h3>popover提示框内容</h3>
  <hr class="fn-mt10">
  <div id="j-overlay-content" class="fn-mt10">
    <div class="pz-boxhead fn-w200">
      <em class="icon pz-icon icon-information"></em>
      <span class="title">popover提示框</span>
    </div>
    <div class="pz-boxbody fn-w200">
      <div class="pz-form">
        <div class="fn-pd20 fn-fs14">
          这是一个普通的popover提示框！
        </div>
      </div>
    </div>
  </div>
  <h3 class="fn-mt20">hover显示提示框</h3>
  <hr class="fn-mt10">
  <div id="j-popover" class="fn-pd20 fn-textcenter">
    <span class="fn-mg10"><em class="pz-btn btn-inverse" data-type="left">左提示框</em></span>
    <span class="fn-mg10"><em class="pz-btn btn-inverse" data-type="top">上提示框</em></span>
    <span class="fn-mg10"><em class="pz-btn btn-inverse" data-type="bottom">下提示框</em></span>
    <span class="fn-mg10"><em class="pz-btn btn-inverse" data-type="right">右提示框</em></span>
  </div>
</div>
<script type="text/javascript" src="//static.xinhuaapp.com/js/jquery-1.11.0-min.js"></script>
<script type="text/javascript" src="../pizza/js/pizza.js?_t=undefined"></script>
<script>
var newTooltip = new pizzaCmd.tooltip();
$('#j-tooltip .pz-btn').hover(function(){
  newTooltip.show($(this), $(this).data('type'), '<div class="fn-pd10"><p>这里是提示框内容</p><p>分行内容</p></div>');
}, function(){
  newTooltip.hide();
});

var newPopover = new pizzaCmd.tooltip('pz-popover'),
  newPopoverHtml = $('#j-overlay-content').html();
newPopover.init();
$('#j-popover .pz-btn').hover(function(){
  newPopover.show($(this), $(this).data('type'), newPopoverHtml);
}, function(){
  newPopover.hide();
});
</script>
</body>
</html>